<template>
  <editor-layout class="edit"
                 @ok="handleOk"
                 v-on="$listeners"
                 v-loading="loading"
                 :loading="saveLoading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-tabs v-model="activeName">
      <el-tab-pane label="HTTP数据集" name="http">
        <el-form size="mini" inline>
          <el-form-item label="数据集名称">
            <el-input v-model="model1.name" clearable placeholder="请输入数据集名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="">
          <sys-table ref="tb1" class="screen-table" :columns="columns1" border stripe :loader="loader1">
            <template v-slot:id="{row}">
              <el-radio :label="row.id" v-model="currId"></el-radio>
            </template>
            <template v-slot:dynSentence="{row}">
              {{ getInfo(row) }}
            </template>
          </sys-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="SQL数据集" name="sql">
        <el-form size="mini" inline>
          <el-form-item label="数据集名称">
            <el-input v-model="model2.name" clearable placeholder="请输入数据集名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="">
          <sys-table ref="tb2" class="screen-table" :columns="columns1" border stripe :loader="loader2">
            <template v-slot:id="{row}">
              <el-radio :label="row.id" v-model="currId"></el-radio>
            </template>
          </sys-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </editor-layout>
</template>

<script>
import sysTable from '@/components/common/page/sys-table'
import {postReportdatasetList} from '@/api/dateSet'

export default {
  name: 'tm-dataset-panel',
  cnName: '数据集弹窗',
  components: {
    sysTable
  },
  props: {
    dataSetId: [Number, String]
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      activeName: 'http',
      currId: this.dataSetId,
      model1: {
        name: '',
        setType: 'http'
      },
      columns1: [
        {label: '', prop: 'id', width: 50, align: 'center'},
        {label: '数据集名称', prop: 'setName', width: 150, showOverflowTooltip: true},
        {label: '描述', prop: 'setDesc', width: 200, showOverflowTooltip: true},
        {label: '接口地址', prop: 'dynSentence'}
      ],
      model2: {
        name: '',
        setType: 'sql'
      }
    }
  },
  methods: {

    async loader1(page, limit) {
      const res = await postReportdatasetList({page, limit, ...this.model1})
      res.total = res.totalCount
      return res
    },
    async loader2(page, limit) {
      const res = await postReportdatasetList({page, limit, ...this.model2})
      res.total = res.totalCount
      return res
    },
    getInfo(row) {
      const str = row.dynSentence
      let obj = {}
      try {
        obj = JSON.parse(str)
      } catch (e) {
        console.error(e)
      }
      return obj.apiUrl
    },
    handleOk() {
      const dataSetId = this.currId || ''
      let dateSetName = ''
      const list1 = this.$refs.tb1.list
      const list2 = this.$refs.tb2.list
      let find = null

      console.info(dataSetId, list1)

      find = list1.find(o => o.id === dataSetId)
      if(!find) {
        find = list2.find(o => o.id === dataSetId)
      }

      if(!find) {
        this.$message.warning('请勾选数据集!')
        return
      }
      dateSetName = find.setName



      this.$emit('on-ok', {dataSetId, dateSetName})
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-radio__label {
  display: none;
}
</style>
